<template>
  <div class="flex1 flexC kly_box">
    <p class="kly_top font_s16">
      入园总人数：<span class="num_impact font_s28" style="margin-right: 1rem;color: #24b3ff">{{videoAllComeNum}}</span>
      在园总人数：<span class="num_impact font_s28" style="color: #f3c910">{{videoAllInNum}}</span>
    </p>
    <div class="flex1 flexC positionR">
      <ul style="margin: 1rem .4rem .4rem .4rem" class="videoList flex1">
        <li class="colorF font_s14 videoItem"
            v-for="(item, index) in videoInfoNew"
            :key="index">
          <p class="videoTitle">
            入园：<span style="color: #AEE9FE;margin-right: 1rem">{{ item.area1_num }}</span>
            在园：<span style="color: #AEE9FE">{{ item | inPeopleNum }}</span>
          </p>
          <div class="videoStyle" @click="fangda(item.serialno, index)">
            <MyVideo3 :imgSn="item.serialno" :closeType="closeType" :heightStyle="heightStyle"></MyVideo3>
            <img src="../../assets/img/zhjg/fangda.png"
                 alt
                 style="position: absolute;left: 1rem;bottom: 3%" />
          </div>
          <p style="color: #969BAE;text-align: center" class="font_s20">{{ item.cemeteryname }}</p>
        </li>
      </ul>
      <p style="color:#75FBFE;line-height: 2.5rem;" class="font_s16 JustifyContentC AlignItemsC flex">
        <span v-if="current > 1"
              src="@/assets/img/zhjg/left_arrow.png"
              alt
              style="margin-right: 2rem;font-weight: bold"
              @click="getData(current-1)">上一页</span>
        <span v-if="current !==total"
              src="@/assets/img/zhjg/right_arrow.png"
              alt
              @click="getData(current+1)"
              style="font-weight: bold">下一页</span>
        <!--  <img v-if="current > 1" src="@/assets/img/zhjg/left_arrow.png" alt @click="getData(current-1)" />
          <img v-if="current !==total" src="@/assets/img/zhjg/right_arrow.png" alt @click="getData(current+1)" />-->
      </p>
    </div>
    <modal v-if="fangdaMode">
      <div class="JustifyContentC AlignItemsC" style="padding: 0 2rem;box-sizing: border-box">
        <my-video5  :imgSn="videoId" :NunString="NunString" :heightStyle2="heightStyle2" />
        <img
                src="../../assets/img/zhjg/suo.png"
                alt
                style="position: absolute;top: 2%;right: 2%"
                @click="suoClick"
        />
      </div>
    </modal>
  </div>
</template>

<script>
  import { getPoineAreaAllNumList, queryPeopleNum } from '@/api/home'
  import MyVideo3 from "./MyVideo3";
  import Modal from "../../components/Modal";
  import MyVideo5 from "./MyVideo5";
  export default {
    name: "KlyItem",
    components: {MyVideo5, Modal, MyVideo3},
    props: {
      dataList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    filters: {
      inPeopleNum(item) {
        let comeNum = parseInt(item.area1_num)
        let inNum = parseInt(item.area2_num)
        let num = comeNum - inNum
        return num
      }
    },
    data () {
      return {
        videoId: 'f43fc06e-5267c118',
        currentPage: 1,
        videoInfoNew: [],
        videoAllComeNum: 0,
        videoAllInNum: 0,
        total: 10, // 总页数
        current: 1, // 当前页面下标
        pageSize: 4, // 页面显示条数
        showPage: true, // 显示隐藏分页
        closeType: -1,
        heightStyle: '9.1875rem',
        heightStyle2: '94%',
        fangdaMode: false,
        NunString: 'a'
      }
    },
    mounted () {
      this.getData(this.current)
      this.getKly()
    },
    methods: {
      fangda (videoUrl, index) {
        this.closeType = index
        this.fangdaMode = true
        this.videoId = videoUrl
      },
      suoClick () {
        this.fangdaMode = false
      },
      getKly() {
        const params = { page: 1, pageSize: 1 }
        queryPeopleNum(params).then((response) => {
          if (response.data) {
            this.videoAllComeNum = response.data.response.allComeAreaNum
            this.videoAllInNum = response.data.response.allInAreaNum
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      getData (current) {
        this.current = current
        const params = { page: this.current + '', rows: this.pageSize + '' }
        getPoineAreaAllNumList(params).then((response) => {
          if (response.data.data) {
            /*this.videoAllComeNum = response.data.response.allComeAreaNum
            this.videoAllInNum = response.data.response.allInAreaNum*/
            this.videoInfoNew = response.data.data.rows
            this.total = parseInt(response.data.data.total)
          }
        }).catch((response) => {
          console.log(response)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.kly_box {
  width: 100%;
  overflow: hidden;
  .num_impact{
    font-family: Impact;
    font-weight: 400;
    color: #75FBFE;
    margin-right: .2rem;
  }
  .kly_top {
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    color: #D6FDFF;
  }
  .videoList {
    position: relative;
    margin: 0 auto;
  }
  .videoList li {
    width: 49%;
    margin-right: 2%;
    float: left;
    margin-top: 5%;
  }
  .videoList li:nth-child(1),
  .videoList li:nth-child(2) {
    margin-top: 0;
  }
  .videoList li:nth-child(2),
  .videoList li:nth-child(4) {
    margin-right: 0;
  }
  .videoStyle {
    height: 9.1875rem;
    width: 100%;
    position: relative;
  }
  .videoShow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.7);
    z-index: 2;
  }
  .videoTitle {
    background: #121935;
    height: 2.125rem;
    line-height: 2.125rem;
    text-align: center;
  }

}
</style>